<!-- build time:Tue Dec 17 2019 19:26:43 GMT+0800 (GMT+08:00) --><!doctype html><html class="theme-next mist" lang="zh-Hans"><head><meta name="generator" content="Hexo 3.8.0"><meta name="google-site-verification" content="7Tau9WyVgxnsEY9oYedu9g0U6_8akOX3wiKbaYcrg9A"><meta name="baidu-site-verification" content="EVwLiaxdxX"><link href="/css/xps13.css" rel="stylesheet" type="text/css"><link href="/css/message.css" rel="stylesheet" type="text/css"><script type="text/javascript" src="/js/jquery-1.11.3.min.js"></script><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1"><meta http-equiv="Cache-Control" content="no-transform"><meta http-equiv="Cache-Control" content="no-siteapp"><link href="/lib/font-awesome/css/font-awesome.min.css?v=4.6.2" rel="stylesheet" type="text/css"><link href="/css/main.css?v=5.1.1" rel="stylesheet" type="text/css"><meta name="keywords" content="JavaScript,ES6,"><link rel="alternate" href="/atom.xml" title="MrBird" type="application/atom+xml"><link rel="shortcut icon" type="image/x-icon" href="/favicon.ico?v=5.1.1"><meta name="description" content="ECMAScript 6.0（以下简称 ES6）是 JavaScript 语言的下一代标准，已经在 2015 年 6 月正式发布了。它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。这里主要记录下学习ES6中值得记录的地方，以备忘。"><meta name="keywords" content="JavaScript,ES6"><meta property="og:type" content="article"><meta property="og:title" content="ECMAScript 6学习笔记"><meta property="og:url" content="http://mrbird.cc/ES2015-Learn-Note.html"><meta property="og:site_name" content="MrBird"><meta property="og:description" content="ECMAScript 6.0（以下简称 ES6）是 JavaScript 语言的下一代标准，已经在 2015 年 6 月正式发布了。它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。这里主要记录下学习ES6中值得记录的地方，以备忘。"><meta property="og:locale" content="zh-Hans"><meta property="og:image" content="http://mrbird.cc/img/QQ截图20181214100430.png"><meta property="og:image" content="http://mrbird.cc/img/QQ截图20181214100532.png"><meta property="og:image" content="http://mrbird.cc/img/QQ截图20181214101739.png"><meta property="og:image" content="http://mrbird.cc/img/QQ截图20181214102509.png"><meta property="og:image" content="http://mrbird.cc/img/20181214103349.png"><meta property="og:image" content="http://mrbird.cc/img/QQ截图20181214105137.png"><meta property="og:image" content="http://mrbird.cc/img/QQ截图20181214105927.png"><meta property="og:image" content="http://mrbird.cc/img/QQ截图20181214110426.png"><meta property="og:image" content="http://mrbird.cc/img/QQ截图20181214110857.png"><meta property="og:image" content="http://mrbird.cc/img/QQ截图20181214111359.png"><meta property="og:image" content="http://mrbird.cc/img/QQ截图20181214112024.png"><meta property="og:image" content="http://mrbird.cc/img/QQ截图20181214113156.png"><meta property="og:image" content="http://mrbird.cc/img/QQ截图20181214134559.png"><meta property="og:image" content="http://mrbird.cc/img/QQ截图20181214135040.png"><meta property="og:image" content="http://mrbird.cc/img/QQ截图20181214140128.png"><meta property="og:image" content="http://mrbird.cc/img/QQ截图20181214140128.png"><meta property="og:image" content="http://mrbird.cc/img/QQ截图20181214141021.png"><meta property="og:image" content="http://mrbird.cc/img/QQ截图20181214142125.png"><meta property="og:image" content="http://mrbird.cc/img/QQ截图20181214143017.png"><meta property="og:image" content="http://mrbird.cc/img/QQ截图20181214143758.png"><meta property="og:image" content="http://mrbird.cc/img/QQ截图20181214144148.png"><meta property="og:image" content="http://mrbird.cc/img/QQ截图20181214145321.png"><meta property="og:image" content="http://mrbird.cc/img/QQ截图20181214150419.png"><meta property="og:image" content="http://mrbird.cc/img/QQ截图20181214151355.png"><meta property="og:image" content="http://mrbird.cc/img/111164.gif"><meta property="og:updated_time" content="2019-10-28T12:14:46.229Z"><meta name="twitter:card" content="summary"><meta name="twitter:title" content="ECMAScript 6学习笔记"><meta name="twitter:description" content="ECMAScript 6.0（以下简称 ES6）是 JavaScript 语言的下一代标准，已经在 2015 年 6 月正式发布了。它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。这里主要记录下学习ES6中值得记录的地方，以备忘。"><meta name="twitter:image" content="http://mrbird.cc/img/QQ截图20181214100430.png"><script type="text/javascript" id="hexo.configurations">var NexT=window.NexT||{},CONFIG={root:"/",scheme:"Mist",sidebar:{position:"left",display:"always",offset:12,offset_float:0,b2t:!1,scrollpercent:!1},fancybox:!1,motion:!1}</script><title>ECMAScript 6学习笔记 | MrBird</title></head><body ondragstart="return!1" class="animsition" lang="zh-Hans" style="overflow-x:hidden;padding-right:280px"><script type="text/javascript" src="/js/mo.min.js"></script><style>@media (min-width:768px) and (max-width:991px){body .header-innerr{width:700px!important}}.header-innerr{margin:0 auto;padding:100px 0 70px;width:880px}@media (min-width:1600px){.container .header-innerr{width:1200px}}.header-innerr{position:relative}.header-innerr{padding:20px 0 0}.header-innerr:after,.header-innerr:before{content:" ";display:table}.header-innerr:after{clear:both}@media (max-width:767px){.header-innerr{width:auto;padding:10px;margin-bottom:-20px}}</style><div class="container sidebar-position-left page-post-detail"><div class="headband"></div><header id="header" class="header"><div class="header-inner"><div class="site-brand-wrapper"><div class="site-meta"><link href="https://fonts.font.im/css?family=Merienda" rel="stylesheet"><div class="custom-logo-site-title"><a href="/" class="brand" rel="start"><span class="logo-line-before"><i></i></span> <span class="site-title" style="font-family:Merienda;font-size:1.3rem">MrBird</span> <span class="logo-line-after"><i></i></span></a></div><p class="site-subtitle"></p></div><div class="site-nav-toggle"><button><span class="btn-bar"></span> <span class="btn-bar"></span> <span class="btn-bar"></span></button></div></div><nav class="site-nav"><ul id="menu" class="menu"><li class="menu-item menu-item-home"><a href="/" rel="section">HOME</a></li><li class="menu-item menu-item-archives"><a href="/archives/" rel="section">ARCHIVES</a></li><li class="menu-item menu-item-tags"><a href="/tags/" rel="section">TAGS</a></li><li class="menu-item menu-item-friends"><a href="/friends/" rel="section">FRIENDS</a></li><div class="sidebar-toggle" style="display:none"><div class="sidebar-toggle-line-wrap"><span class="sidebar-toggle-line sidebar-toggle-line-first"></span> <span class="sidebar-toggle-line sidebar-toggle-line-middle"></span> <span class="sidebar-toggle-line sidebar-toggle-line-last"></span></div></div></ul><div class="site-search"><div class="popup search-popup local-search-popup"><div class="local-search-header clearfix"><span class="search-icon"><i class="fa fa-search"></i> </span><span class="popup-btn-close"><i class="fa fa-times-circle"></i></span><div class="local-search-input-wrapper"><input autocomplete="off" placeholder="Search" spellcheck="false" type="text" id="local-search-input"></div></div><div id="local-search-result"></div></div></div></nav></div><div class="header-innerr"><div class="note info" style="margin:0;letter-spacing:.15px">🐤手把手教你搭建<strong>Spring Cloud微服务权限系统</strong>（从零到部署）：<a style="color:#40dab2;font-weight:600" href="https://www.kancloud.cn/mrbird/spring-cloud" target="_blank">https://www.kancloud.cn/mrbird/spring-cloud</a></div></div></header><main id="main" class="main"><div class="main-inner"><div class="content-wrap"><div id="content" class="content"><div id="posts" class="posts-expand"><article class="post post-type-normal" itemscope itemtype="http://schema.org/Article"><link itemprop="mainEntityOfPage" href="http://mrbird.cc/ES2015-Learn-Note.html"><span hidden itemprop="author" itemscope itemtype="http://schema.org/Person"><meta itemprop="name" content="MrBird"><meta itemprop="description" content=""><meta itemprop="image" content="/images/blogImage.jpg"></span><span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization"><meta itemprop="name" content="MrBird"></span><header class="post-header"><h1 class="post-title" itemprop="name headline">ECMAScript 6学习笔记</h1><div class="post-meta"><span class="post-time"><span class="post-meta-item-icon"><i class="fa fa-calendar-o"></i> </span><span class="post-meta-item-text">Posted on</span> <time title="创建于" itemprop="dateCreated datePublished" datetime="2018-05-31T09:30:40+08:00">2018-05-31 </time></span><span></span> <span class="post-meta-divider">|</span> <span class="page-pv"><i class="fa fa-laptop"></i>&nbsp;&nbsp;Visit count <span class="busuanzi-value" id="busuanzi_value_page_pv"></span></span></div></header><div class="post-body" itemprop="articleBody"><p>ECMAScript 6.0（以下简称 ES6）是 JavaScript 语言的下一代标准，已经在 2015 年 6 月正式发布了。它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。这里主要记录下学习ES6中值得记录的地方，以备忘。<a id="more"></a></p><h2 id="const恒量"><a href="#const恒量" class="headerlink" title="const恒量"></a>const恒量</h2><p>cont限制的给恒量分配值得动作，而不是限制恒量里的值，比如下面这个例子失败的：</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> fruit = <span class="string">'🍎'</span></span><br><span class="line"><span class="built_in">console</span>.log(fruit)</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> fruit = <span class="string">'🍋'</span></span><br><span class="line"><span class="built_in">console</span>.log(fruit)</span><br></pre></td></tr></table></figure><p><img src="img/QQ截图20181214100430.png" alt="QQ截图20181214100430.png"></p><p>而下面这个例子是可行的：</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> fruit = []</span><br><span class="line">fruit.push(<span class="string">'🍋'</span>)</span><br><span class="line"><span class="built_in">console</span>.log(fruit)</span><br></pre></td></tr></table></figure><p></p><p><img src="img/QQ截图20181214100532.png" alt="QQ截图20181214100532.png"></p><h2 id="解构"><a href="#解构" class="headerlink" title="解构"></a>解构</h2><p>解构就是将一个数据结构进行分解，通常分为数组解构，对象解构和参数解构。</p><h3 id="数组解构"><a href="#数组解构" class="headerlink" title="数组解构"></a>数组解构</h3><p>在ES6之前，要将数组里的每个值分配给一个变量，需要这样做:</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">food</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">return</span> [<span class="string">'🍰'</span>, <span class="string">'☕'</span>, <span class="string">'🍓'</span>]</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">var</span> temp = food()</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> dessert = temp[<span class="number">0</span>]</span><br><span class="line"><span class="keyword">var</span> drink = temp[<span class="number">1</span>]</span><br><span class="line"><span class="keyword">var</span> fruit = temp[<span class="number">2</span>]</span><br><span class="line"><span class="built_in">console</span>.log(dessert, drink, fruit)</span><br></pre></td></tr></table></figure><p></p><p><img src="img/QQ截图20181214101739.png" alt="QQ截图20181214101739.png"></p><p>ES6后可以这样做：</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">food</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">return</span> [<span class="string">'🍰'</span>, <span class="string">'☕'</span>, <span class="string">'🍓'</span>]</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> [dessert, drink, fruit] = food()</span><br><span class="line"><span class="built_in">console</span>.log(dessert, drink, fruit)</span><br></pre></td></tr></table></figure><p></p><p>输出结果是一样的，是不是很方便？</p><h3 id="对象解构"><a href="#对象解构" class="headerlink" title="对象解构"></a>对象解构</h3><p>将food返回改为一个对象，然后解构：</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">food</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">return</span> &#123;<span class="attr">dessert</span>: <span class="string">'🍰'</span>, <span class="attr">drink</span>: <span class="string">'☕'</span>, <span class="attr">fruit</span>: <span class="string">'🍓'</span>&#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> &#123;<span class="attr">dessert</span>: dessert1, <span class="attr">drink</span>: drink1, <span class="attr">fruit</span>: fruit1&#125; = food()</span><br><span class="line"><span class="built_in">console</span>.log(dessert1, drink1, fruit1)</span><br></pre></td></tr></table></figure><p></p><p>这里做的是将对象里的dessert属性值赋予给dessert1，依此类推，有点颠倒的感觉，结果如下：</p><p><img src="img/QQ截图20181214102509.png" alt="QQ截图20181214102509.png"></p><h3 id="参数解构"><a href="#参数解构" class="headerlink" title="参数解构"></a>参数解构</h3><p>使用对象解构的方式，我们可以很容易的给函数传递一个对象参数：</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">food</span>(<span class="params">dessert, drink, &#123;location, restaurant&#125; = &#123;&#125;</span>) </span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(dessert, drink, location, restaurant)</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">food(<span class="string">'🎂'</span>, <span class="string">'☕'</span>, &#123;<span class="attr">location</span>: <span class="string">'fuzhou'</span>, <span class="attr">restaurant</span>: <span class="string">'MrBird\'s Restaurant'</span>&#125;)</span><br></pre></td></tr></table></figure><p></p><p><img src="img/20181214103349.png" alt="20181214103349.png"></p><h2 id="模板字符串"><a href="#模板字符串" class="headerlink" title="模板字符串"></a>模板字符串</h2><p>ES6之前的字符串拼接：</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> weather = <span class="string">'🌞'</span>, mood = <span class="string">'😄'</span>, drink = <span class="string">'🍸'</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> message = <span class="string">"今天天气："</span> + weather</span><br><span class="line">            + <span class="string">"，喝了一杯："</span> + drink</span><br><span class="line">            + <span class="string">"，心情："</span> + mood</span><br><span class="line"><span class="built_in">console</span>.log(message)</span><br></pre></td></tr></table></figure><p></p><p>ES6后我们可以这样做：</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> weather = <span class="string">'🌞'</span>, mood = <span class="string">'😄'</span>, drink = <span class="string">'🍸'</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> message = <span class="string">`今天天气：<span class="subst">$&#123;weather&#125;</span></span></span><br><span class="line"><span class="string">               ，喝了一杯：<span class="subst">$&#123;drink&#125;</span></span></span><br><span class="line"><span class="string">               ，心情：<span class="subst">$&#123;mood&#125;</span>`</span></span><br><span class="line"><span class="built_in">console</span>.log(message)</span><br></pre></td></tr></table></figure><p></p><p><img src="img/QQ截图20181214105137.png" alt="QQ截图20181214105137.png"></p><h3 id="带标签的模板字符串"><a href="#带标签的模板字符串" class="headerlink" title="带标签的模板字符串"></a>带标签的模板字符串</h3><p>可以在模板字符串前加个标签，这个标签是个函数，我们可以在这个函数里输出一些值：</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> weather = <span class="string">'🌞'</span>, mood = <span class="string">'😄'</span>, drink = <span class="string">'🍸'</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> message = note<span class="string">`今天天气：<span class="subst">$&#123;weather&#125;</span></span></span><br><span class="line"><span class="string">               ，喝了一杯：<span class="subst">$&#123;drink&#125;</span></span></span><br><span class="line"><span class="string">               ，心情：<span class="subst">$&#123;mood&#125;</span>`</span></span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">note</span>(<span class="params">strings, ...params</span>) </span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(strings)</span><br><span class="line">    <span class="built_in">console</span>.log(params)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p></p><p><img src="img/QQ截图20181214105927.png" alt="QQ截图20181214105927.png"></p><p>可以看到，<code>strings</code>里的内容是模板字符串的每一个部分，<code>...params</code>包含的是模板字符串里的所有变量值。</p><h2 id="字符串几个新方法"><a href="#字符串几个新方法" class="headerlink" title="字符串几个新方法"></a>字符串几个新方法</h2><p>以什么开头<code>startsWith</code>，以什么结尾<code>endsWith</code>，是否包含<code>includes</code>：</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> weather = <span class="string">'🌞'</span>, mood = <span class="string">'😄'</span>, drink = <span class="string">'🍸'</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> message = <span class="string">`今天天气：<span class="subst">$&#123;weather&#125;</span></span></span><br><span class="line"><span class="string">               ，喝了一杯：<span class="subst">$&#123;drink&#125;</span></span></span><br><span class="line"><span class="string">               ，心情：<span class="subst">$&#123;mood&#125;</span>`</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(</span><br><span class="line">   message.startsWith(<span class="string">'今天'</span>),</span><br><span class="line">   message.endsWith(<span class="string">'😄'</span>),</span><br><span class="line">   message.includes(<span class="string">'🍉'</span>)</span><br><span class="line">)</span><br></pre></td></tr></table></figure><p></p><p><img src="img/QQ截图20181214110426.png" alt="QQ截图20181214110426.png"></p><h2 id="参数默认值"><a href="#参数默认值" class="headerlink" title="参数默认值"></a>参数默认值</h2><p>ES6后我们可以给函数参数指定默认值：</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">food</span>(<span class="params">dessert = <span class="string">'🎂'</span>, drink = <span class="string">'🍵'</span></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="string">`<span class="subst">$&#123;dessert&#125;</span> and <span class="subst">$&#123;drink&#125;</span>`</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(</span><br><span class="line">    food(),</span><br><span class="line">    <span class="string">'\n'</span>,</span><br><span class="line">    food(<span class="string">'🌭'</span>, <span class="string">'🍺'</span>)</span><br><span class="line">)</span><br></pre></td></tr></table></figure><p></p><p><img src="img/QQ截图20181214110857.png" alt="QQ截图20181214110857.png"></p><h2 id="操作符"><a href="#操作符" class="headerlink" title="操作符..."></a>操作符<code>...</code></h2><h3 id="展开操作符"><a href="#展开操作符" class="headerlink" title="展开操作符"></a>展开操作符</h3><p>在数组前加<code>...</code>，称为展开操作符，可以用于展开数组：</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> fruits = [<span class="string">'🍍'</span>, <span class="string">'🍎'</span>],</span><br><span class="line">    foods = [<span class="string">'🍟'</span>, ...fruits]</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(</span><br><span class="line">    fruits,</span><br><span class="line">    <span class="string">'\n'</span>,</span><br><span class="line">    ...fruits,</span><br><span class="line">    <span class="string">'\n'</span>,</span><br><span class="line">    foods,</span><br><span class="line">    <span class="string">'\n'</span>,</span><br><span class="line">    ...foods</span><br><span class="line">)</span><br></pre></td></tr></table></figure><p></p><p><img src="img/QQ截图20181214111359.png" alt="QQ截图20181214111359.png"></p><h3 id="剩余操作符"><a href="#剩余操作符" class="headerlink" title="剩余操作符"></a>剩余操作符</h3><p>在函数参数前加<code>...</code>，称为剩余操作符，用于接收函数剩下的参数：</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">food</span>(<span class="params">dessert,drink,...foods</span>) </span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(dessert,drink,foods)</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">food(<span class="string">'🎂'</span>,<span class="string">'🍺'</span>,<span class="string">'🍟'</span>,<span class="string">'🍤'</span>,<span class="string">'🍖'</span>)</span><br></pre></td></tr></table></figure><p></p><p><img src="img/QQ截图20181214112024.png" alt="QQ截图20181214112024.png"></p><p>剩余的参数被放到了一个数组里。</p><h2 id="函数的名字"><a href="#函数的名字" class="headerlink" title="函数的名字"></a>函数的名字</h2><p>ES6函数新增了name属性，用于输出函数的名字:</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">food</span>(<span class="params"></span>) </span>&#123; &#125;</span><br><span class="line"><span class="keyword">var</span> food_1 = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123; &#125;</span><br><span class="line"><span class="keyword">var</span> food_2 = <span class="function"><span class="keyword">function</span> <span class="title">deliciousFood</span>(<span class="params"></span>) </span>&#123; &#125;</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(</span><br><span class="line">    food.name,</span><br><span class="line">    food_1.name,</span><br><span class="line">    food_2.name</span><br><span class="line">)</span><br></pre></td></tr></table></figure><p></p><p><img src="img/QQ截图20181214113156.png" alt="QQ截图20181214113156.png"></p><h2 id="Object新增方法"><a href="#Object新增方法" class="headerlink" title="Object新增方法"></a>Object新增方法</h2><h3 id="Object-is"><a href="#Object-is" class="headerlink" title="Object.is()"></a>Object.is()</h3><p>判断两个东西是不是同一个：</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">console</span>.log(+<span class="number">0</span> == <span class="number">-0</span>)</span><br><span class="line"><span class="built_in">console</span>.log(+<span class="number">0</span> === <span class="number">-0</span>)</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(<span class="literal">NaN</span> == <span class="literal">NaN</span>)</span><br><span class="line"><span class="built_in">console</span>.log(<span class="literal">NaN</span> === <span class="literal">NaN</span>)</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Object</span>.is(+<span class="number">0</span>, <span class="number">-0</span>))</span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Object</span>.is(<span class="literal">NaN</span>, <span class="literal">NaN</span>))</span><br></pre></td></tr></table></figure><p></p><p><img src="img/QQ截图20181214134559.png" alt="QQ截图20181214134559.png"></p><h3 id="Object-assign"><a href="#Object-assign" class="headerlink" title="Object.assign()"></a>Object.assign()</h3><p>作用就是将一个对象的内容赋予给另外一个对象：</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> food = &#123;<span class="attr">dessert</span>:<span class="string">'🍦'</span>&#125;</span><br><span class="line"></span><br><span class="line"><span class="built_in">Object</span>.assign(food, &#123;<span class="attr">drink</span>: <span class="string">'🥣'</span>, <span class="attr">fruit</span>: <span class="string">'🥝'</span>&#125;)</span><br><span class="line"><span class="built_in">console</span>.log(food)</span><br></pre></td></tr></table></figure><p></p><p><img src="img/QQ截图20181214135040.png" alt="QQ截图20181214135040.png"></p><p>第一个参数为接收者，第二个参数为赋予者。</p><h3 id="Object-setPrototypeOf"><a href="#Object-setPrototypeOf" class="headerlink" title="Object.setPrototypeOf()"></a>Object.setPrototypeOf()</h3><p>设置对象的prototype，给个例子体会：</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> breakfast = &#123;</span><br><span class="line">    getFood() &#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="string">'🧀'</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> lunch = &#123;</span><br><span class="line">    getFood() &#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="string">'🍜'</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> dinner = <span class="built_in">Object</span>.create(lunch)</span><br><span class="line"><span class="built_in">console</span>.log(dinner.getFood())</span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Object</span>.getPrototypeOf(dinner) === lunch)</span><br><span class="line"></span><br><span class="line"><span class="built_in">Object</span>.setPrototypeOf(dinner, breakfast)</span><br><span class="line"><span class="built_in">console</span>.log(dinner.getFood())</span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Object</span>.getPrototypeOf(dinner) === breakfast)</span><br></pre></td></tr></table></figure><p></p><p><img src="img/QQ截图20181214140128.png" alt="QQ截图20181214140128.png"></p><h3 id="proto"><a href="#proto" class="headerlink" title="__proto__"></a><code>__proto__</code></h3><p>我们还可以用<code>__proto__</code>（前后各两个下划线）设置对象的prototype：</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> breakfast = &#123;</span><br><span class="line">    getFood() &#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="string">'🧀'</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> lunch = &#123;</span><br><span class="line">    getFood() &#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="string">'🍜'</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> dinner = &#123;</span><br><span class="line">    __proto__: lunch</span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">console</span>.log(dinner.getFood())</span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Object</span>.getPrototypeOf(dinner) === lunch)</span><br><span class="line"></span><br><span class="line">dinner.__proto__ = breakfast</span><br><span class="line"><span class="built_in">console</span>.log(dinner.getFood())</span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Object</span>.getPrototypeOf(dinner) === breakfast)</span><br></pre></td></tr></table></figure><p></p><p><img src="img/QQ截图20181214140128.png" alt="QQ截图20181214140128.png"></p><h3 id="super"><a href="#super" class="headerlink" title="super"></a>super</h3><p>看下<code>super</code>的用法：</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> lunch = &#123;</span><br><span class="line">    getFood() &#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="string">'🍜'</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> dinner = &#123;</span><br><span class="line">    __proto__: lunch,</span><br><span class="line">    getFood() &#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="keyword">super</span>.getFood() + <span class="string">' and 🥗'</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">console</span>.log(dinner.getFood())</span><br></pre></td></tr></table></figure><p></p><p><img src="img/QQ截图20181214141021.png" alt="QQ截图20181214141021.png"></p><h2 id="生成迭代器"><a href="#生成迭代器" class="headerlink" title="生成迭代器"></a>生成迭代器</h2><p>ES6中我们可以使用<code>function*</code>和<code>yield</code>生成一个迭代器：</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span>* <span class="title">cook</span>(<span class="params">foods</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">for</span> (value <span class="keyword">of</span> foods) &#123;</span><br><span class="line">        <span class="keyword">yield</span> value</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> result = cook([<span class="string">'🌮'</span>, <span class="string">'🍿'</span>, <span class="string">'🥧'</span>])</span><br><span class="line"><span class="built_in">console</span>.log(result.next())</span><br><span class="line"><span class="built_in">console</span>.log(result.next())</span><br><span class="line"><span class="built_in">console</span>.log(result.next())</span><br><span class="line"><span class="built_in">console</span>.log(result.next())</span><br></pre></td></tr></table></figure><p></p><p><img src="img/QQ截图20181214142125.png" alt="QQ截图20181214142125.png"></p><h2 id="class类"><a href="#class类" class="headerlink" title="class类"></a>class类</h2><p>ES6允许我们在JavaScript中定义一个类：</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Cook</span> </span>&#123;</span><br><span class="line">    <span class="keyword">constructor</span>(food) &#123;</span><br><span class="line">        <span class="keyword">this</span>.food = food</span><br><span class="line">    &#125;</span><br><span class="line">    make() &#123;</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="keyword">this</span>.food)</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> mrbird = <span class="keyword">new</span> Cook([<span class="string">'🥞'</span>])</span><br><span class="line">mrbird.make()</span><br></pre></td></tr></table></figure><p></p><p><img src="img/QQ截图20181214143017.png" alt="QQ截图20181214143017.png"></p><p>类里包含了一个有参构造器和方法。</p><h3 id="get-amp-amp-set"><a href="#get-amp-amp-set" class="headerlink" title="get &amp;&amp; set"></a>get &amp;&amp; set</h3><p>我们可以在类里定义get和set：</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Cook</span> </span>&#123;</span><br><span class="line">    <span class="keyword">constructor</span>(food) &#123;</span><br><span class="line">        <span class="keyword">this</span>.food = food</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    get foods() &#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="keyword">this</span>.food</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    set foods(value) &#123;</span><br><span class="line">        <span class="keyword">this</span>.food.push(value)</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> mrbird = <span class="keyword">new</span> Cook([<span class="string">'🥞'</span>])</span><br><span class="line">mrbird.foods =<span class="string">'🍣'</span></span><br><span class="line">mrbird.foods =<span class="string">'🥣'</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(mrbird.foods)</span><br></pre></td></tr></table></figure><p></p><p><img src="img/QQ截图20181214143758.png" alt="QQ截图20181214143758.png"></p><h3 id="静态方法"><a href="#静态方法" class="headerlink" title="静态方法"></a>静态方法</h3><p>我们可以在类里定义静态方法，静态方法就是不需要实例化类就能调用的方法：</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Cook</span> </span>&#123;</span><br><span class="line">    <span class="keyword">constructor</span>(food) &#123;</span><br><span class="line">        <span class="keyword">this</span>.food = food</span><br><span class="line">    &#125;</span><br><span class="line">     <span class="keyword">static</span> make(food) &#123;</span><br><span class="line">        <span class="built_in">console</span>.log(food)</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">Cook.make(<span class="string">'🍪'</span>)</span><br></pre></td></tr></table></figure><p></p><p><img src="img/QQ截图20181214144148.png" alt="QQ截图20181214144148.png"></p><h3 id="继承"><a href="#继承" class="headerlink" title="继承"></a>继承</h3><p>ES6允许我们继承类：</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line">class Person &#123;</span><br><span class="line">    constructor(name, age) &#123;</span><br><span class="line">        this.name = name</span><br><span class="line">        this.age = age</span><br><span class="line">    &#125;</span><br><span class="line">    introduce() &#123;</span><br><span class="line">        console.log(`$&#123;this.name&#125; is $&#123;this.age&#125; years old`)</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">class HandsomeBoy extends Person &#123;</span><br><span class="line">    constructor(name, age) &#123;</span><br><span class="line">        super(name, age);</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">new HandsomeBoy(&apos;MrBird&apos;, &apos;18&apos;).introduce()</span><br></pre></td></tr></table></figure><p></p><p><img src="img/QQ截图20181214145321.png" alt="QQ截图20181214145321.png"></p><h2 id="Set"><a href="#Set" class="headerlink" title="Set"></a>Set</h2><p>一些Set的常用操作：</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> foods = <span class="keyword">new</span> <span class="built_in">Set</span>(<span class="string">'🧀🍧🍨'</span>)</span><br><span class="line"><span class="built_in">console</span>.log(foods)</span><br><span class="line"></span><br><span class="line">foods.add(<span class="string">'🍭'</span>)</span><br><span class="line">foods.add(<span class="string">'🍭'</span>)</span><br><span class="line"><span class="built_in">console</span>.log(foods)</span><br><span class="line"><span class="built_in">console</span>.log(foods.size)</span><br><span class="line"><span class="built_in">console</span>.log(foods.has(<span class="string">'🍨'</span>))</span><br><span class="line"></span><br><span class="line">foods.delete(<span class="string">'🧀'</span>)</span><br><span class="line"><span class="built_in">console</span>.log(foods)</span><br><span class="line"></span><br><span class="line">foods.forEach(<span class="function"><span class="params">food</span> =&gt;</span> <span class="built_in">console</span>.log(food))</span><br><span class="line"></span><br><span class="line">foods.clear()</span><br><span class="line"><span class="built_in">console</span>.log(foods)</span><br></pre></td></tr></table></figure><p></p><p><img src="img/QQ截图20181214150419.png" alt="QQ截图20181214150419.png"></p><h2 id="Map"><a href="#Map" class="headerlink" title="Map"></a>Map</h2><p>一些Map的常用操作：</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> food = <span class="keyword">new</span> <span class="built_in">Map</span>()</span><br><span class="line"><span class="keyword">let</span> fruit = &#123;&#125;,</span><br><span class="line">    cook = <span class="function"><span class="params">()</span> =&gt;</span> &#123;&#125;,</span><br><span class="line">    dessert = <span class="string">'甜点'</span></span><br><span class="line"></span><br><span class="line">food.set(fruit, <span class="string">'🍈'</span>)</span><br><span class="line">food.set(cook, <span class="string">'🥄'</span>)</span><br><span class="line">food.set(dessert, <span class="string">'🍦'</span>)</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(food)</span><br><span class="line"><span class="built_in">console</span>.log(food.size)</span><br><span class="line"><span class="built_in">console</span>.log(food.get(fruit))</span><br><span class="line"><span class="built_in">console</span>.log(food.get(cook))</span><br><span class="line"></span><br><span class="line">food.forEach(<span class="function">(<span class="params">value, key</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">`<span class="subst">$&#123;key&#125;</span> = <span class="subst">$&#123;value&#125;</span>`</span>)</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line">food.delete(dessert)</span><br><span class="line"><span class="built_in">console</span>.log(food.has(dessert))</span><br><span class="line"></span><br><span class="line">food.clear()</span><br><span class="line"><span class="built_in">console</span>.log(food)</span><br></pre></td></tr></table></figure><p></p><p><img src="img/QQ截图20181214151355.png" alt="QQ截图20181214151355.png"></p><p>先到这里吧，详细的还是得参考<a href="http://es6.ruanyifeng.com/" target="_blank" rel="noopener">http://es6.ruanyifeng.com/</a></p><p>或者<a href="https://babeljs.io/docs/en/learn" target="_blank" rel="noopener">https://babeljs.io/docs/en/learn</a></p><p><img src="img/111164.gif" alt="111164.gif"></p><script>$(".post-body a").not(".thispage").addClass("ignore-href").attr("target","_blank")</script></div><div></div><div><div style="padding:10px 0;margin:20px auto;width:90%;text-align:center;color:#878787"><div>请作者喝瓶肥宅水~</div><button id="rewardButton" style="margin-top:10px" disable="enable" onclick='var e=document.getElementById("QR");"none"===e.style.display?e.style.display="block":e.style.display="none"'><span style="height:46px;width:46px;line-height:46px;border-radius:50%;color:#fe5f55;font-weight:600;background:#ffd5be;border:none;box-shadow:0 4px 8px 0 rgba(255,213,190,.4)">￥</span></button><div id="QR" style="display:none"><div id="wechat" style="display:inline-block"><img id="wechat_qr" src="/img/wechat_pay.png" alt="MrBird WeChat Pay"></div><div id="alipay" style="display:inline-block"><img id="alipay_qr" src="/img/ali_pay.png" alt="MrBird Alipay"></div></div></div><style>#QR img{width:auto;margin:.8em 1em 0 1em}</style></div><div><ul class="post-copyright"><li class="post-copyright-author"><strong>本文作者：</strong> MrBird</li><li class="post-copyright-link"><strong>本文链接：</strong> <a href="http://mrbird.cc/ES2015-Learn-Note.html" title="ECMAScript 6学习笔记">http://mrbird.cc/ES2015-Learn-Note.html</a></li><li class="post-copyright-license"><strong>版权声明： </strong>本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" rel="external nofollow" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明出处！</li></ul></div><footer class="post-footer"><div class="post-tags" style="margin-bottom:1.3rem"><a href="/tags/JavaScript/" rel="tag"># JavaScript</a> <a href="/tags/ES6/" rel="tag"># ES6</a></div><div class="post-nav"><div class="post-nav-next post-nav-item"><a href="/vuex-vuerouter.html" rel="next" title="Vue生态学习之Vuex,Vue-Router"><i class="fa fa-chevron-left"></i> Vue生态学习之Vuex,Vue-Router</a></div><span class="post-nav-divider"></span><div class="post-nav-prev post-nav-item"><a href="/Spring-Security-OAuth2-SSO.html" rel="prev" title="Spring Security OAuth2 SSO">Spring Security OAuth2 SSO <i class="fa fa-chevron-right"></i></a></div></div></footer></article><hr><div id="container"></div><div class="post-spread"><div id="comment-div"></div><style>.valine .vlist{margin-bottom:3rem}.valine .vwrap .vcontrol .col.col-60{text-align:left}.valine .vlist .vcard .vhead,.valine .vlist .vcard section .vfooter{text-align:left}.valine .vlist .vcard section{padding-bottom:.5rem!important}.vname{color:#42b983!important}.valine .vinfo .col{text-align:left;margin-left:-27rem}div#comment-div{margin-bottom:-8rem}.valine .vlist .vcard .vcontent .code,.valine .vlist .vcard .vcontent code,.valine .vlist .vcard .vcontent pre{background:#fbfbfb}.valine .vlist .vcard .vcontent a{color:#42b983}.valine .vlist .vcard .vimg{border-radius:3px}.valine .vbtn{border-radius:2px;padding:.3rem 1.25rem}.valine .vbtn:active,.valine .vbtn:hover{color:#42b983;border-color:#42b983;background-color:#fff}.valine .vwrap .vheader .vinput:focus{border-bottom-color:#42b983}.valine .vlist .vcard .vcontent.expand:before{background:-webkit-gradient(linear,left top,left bottom,from(hsla(0,0%,100%,0)),to(hsla(0,0%,100%,.2)));background:linear-gradient(180deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.2))}.valine .vlist .vcard .vcontent.expand:after{content:"点击展开";font-size:.4rem;text-align:right;left:-1rem;background:hsla(0,0%,100%,.2)}.valine .vlist .vcard section .vfooter .vat{color:#b3b3b3}.valine .vlist .vcard section .vfooter .vat:hover{color:#42b983}.vcontent img{margin:0}.valine .info{display:none}</style><script type="text/javascript" src="/js/av.min.js"></script><script type="text/javascript" src="/js/Valine.min.js"></script><script type="text/javascript" src="/js/activate-power-mode.js"></script><script>POWERMODE.colorful=!0,POWERMODE.shake=!1,document.body.addEventListener("input",POWERMODE),new Valine({el:"#comment-div",notify:!1,verify:!0,appId:"SMcDFP1bN1jgb9Lo8JmtICHm-gzGzoHsz",appKey:"dH4nrUrt3V5XiJiI6Qyejnbi",placeholder:"",path:window.location.pathname,avatar:"monsterid",guest_info:["nick","mail","link"]});var chicken='<a href="#"><img src="https://image.uisdc.com/wp-content/uploads/2018/06/uisdc-chat-chicken.gif" class="checken"></a>';$("#comment-div").prepend(chicken)</script></div></div><script>var $bqinline=$("img[alt='bq-inline']");$bqinline.css({width:"2.3rem",height:"2.3rem",display:"inline","vertical-align":"text-bottom"})</script></div><div class="comments" id="comments"></div></div><aside id="sidebar" class="sidebar" onselectstart="return!1"><div class="sidebar-inner"><ul class="sidebar-nav motion-element"><li class="sidebar-nav-toc sidebar-nav-active" data-target="post-toc-wrap">Contents</li><li class="sidebar-nav-overview" data-target="site-overview">Site Preview</li></ul><section class="site-overview sidebar-panel"><div class="sidebar-sticky sticky"><div itemscope itemtype="http://schema.org/Person"><div class="author__avatar"><img src="/images/blogImage.jpg" class="author__avatar" alt="MrBird" itemprop="image"></div><div class="author__content"><h3 class="author__name" itemprop="name">MrBird's Blog</h3><p class="author__bio" itemprop="description">A simple blog, code repository, just keep blogging</p></div><div class="author__urls-wrapper"><button class="btn btn--inverse">Follow</button><ul class="author__urls social-icons"><li><a href="http://map.baidu.com/?newmap=1&s=s%26wd%3D%E7%A6%8F%E5%B7%9E%E5%B8%82%26c%3D300&from=alamap&tpl=mapcity" target="_blank" itemprop="url" class="ignore-href"><i class="fa fa-fw fa-map-marker" aria-hidden="true"></i>&nbsp;&nbsp;FuZhou,CN</a></li><li><a href="https://love.mrbird.cc" target="_blank" itemprop="url" class="ignore-href"><i class="fa fa-fw fa-diamond" aria-hidden="true"></i>&nbsp;&nbsp;Love</a></li><li><a href="https://cloud.mrbird.cn" target="_blank" itemprop="url" class="ignore-href"><i class="fa fa-fw fa-chain" aria-hidden="true"></i>&nbsp;&nbsp;FEBS</a></li><li><a href="/atom.xml" target="_blank" itemprop="url" class="ignore-href"><i class="fa fa-fw fa-rss" aria-hidden="true"></i>&nbsp;&nbsp;RSS</a></li><li><a href="https://gitee.com/mrbirdd" target="_blank" itemprop="sameAs" class="ignore-href"><i class="fa fa-fw fa-codepen" aria-hidden="true"></i>&nbsp;&nbsp;Gitee</a></li><li><a href="https://github.com/wuyouzhuguli" target="_blank" itemprop="sameAs" class="ignore-href"><i class="fa fa-fw fa-github-alt" aria-hidden="true"></i>&nbsp;&nbsp;GitHub</a></li><li><a href="javascript:;" class="popup-trigger"><i class="fa fa-fw fa-search" aria-hidden="true"></i>&nbsp;&nbsp;Search</a></li></ul></div></div></div><script>var $urls=$(".author__urls").find("a");$urls.each(function(){var o=$(this);o.mouseenter(function(){o.css({color:"#414547"})}),o.mouseleave(function(){o.css({color:""})})})</script></section><section class="post-toc-wrap motion-element sidebar-panel sidebar-panel-active"><div class="post-toc"><div class="post-toc-content"><ol class="nav"><li class="nav-item nav-level-2"><a class="nav-link" href="#const恒量"><span class="nav-number">1.</span> <span class="nav-text">const恒量</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#解构"><span class="nav-number">2.</span> <span class="nav-text">解构</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#数组解构"><span class="nav-number">2.1.</span> <span class="nav-text">数组解构</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#对象解构"><span class="nav-number">2.2.</span> <span class="nav-text">对象解构</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#参数解构"><span class="nav-number">2.3.</span> <span class="nav-text">参数解构</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#模板字符串"><span class="nav-number">3.</span> <span class="nav-text">模板字符串</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#带标签的模板字符串"><span class="nav-number">3.1.</span> <span class="nav-text">带标签的模板字符串</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#字符串几个新方法"><span class="nav-number">4.</span> <span class="nav-text">字符串几个新方法</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#参数默认值"><span class="nav-number">5.</span> <span class="nav-text">参数默认值</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#操作符"><span class="nav-number">6.</span> <span class="nav-text">操作符...</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#展开操作符"><span class="nav-number">6.1.</span> <span class="nav-text">展开操作符</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#剩余操作符"><span class="nav-number">6.2.</span> <span class="nav-text">剩余操作符</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#函数的名字"><span class="nav-number">7.</span> <span class="nav-text">函数的名字</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#Object新增方法"><span class="nav-number">8.</span> <span class="nav-text">Object新增方法</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#Object-is"><span class="nav-number">8.1.</span> <span class="nav-text">Object.is()</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#Object-assign"><span class="nav-number">8.2.</span> <span class="nav-text">Object.assign()</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#Object-setPrototypeOf"><span class="nav-number">8.3.</span> <span class="nav-text">Object.setPrototypeOf()</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#proto"><span class="nav-number">8.4.</span> <span class="nav-text">__proto__</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#super"><span class="nav-number">8.5.</span> <span class="nav-text">super</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#生成迭代器"><span class="nav-number">9.</span> <span class="nav-text">生成迭代器</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#class类"><span class="nav-number">10.</span> <span class="nav-text">class类</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#get-amp-amp-set"><span class="nav-number">10.1.</span> <span class="nav-text">get &amp;&amp; set</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#静态方法"><span class="nav-number">10.2.</span> <span class="nav-text">静态方法</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#继承"><span class="nav-number">10.3.</span> <span class="nav-text">继承</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#Set"><span class="nav-number">11.</span> <span class="nav-text">Set</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#Map"><span class="nav-number">12.</span> <span class="nav-text">Map</span></a></li></ol></div></div></section></div></aside></div></main><footer id="footer" class="footer" onselectstart="return!1"><div class="footer-inner"><div class="copyright">&copy; 2016 - <span itemprop="copyrightYear">2019</span>&nbsp;&nbsp; <span class="author" itemprop="copyrightHolder">MrBird</span>&nbsp;&nbsp;|<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>&nbsp;&nbsp;UV&nbsp;<span class="busuanzi-value" id="busuanzi_value_site_uv" style="cursor:pointer" title="统计开始时间：2019年7月5日"></span> &nbsp;&nbsp;PV&nbsp;<span class="busuanzi-value" id="busuanzi_value_site_pv" style="cursor:pointer" title="统计开始时间：2019年7月5日"></span></div></div></footer><div class="back-to-top"><span style="font-family:'Source Sans Pro','Helvetica Neue',Arial,sans-serif;font-size:1.2em;font-weight:600">TOP</span></div></div><script type="text/javascript">"[object Function]"!==Object.prototype.toString.call(window.Promise)&&(window.Promise=null)</script><script type="text/javascript" src="/lib/jquery/index.js?v=2.1.3"></script><script type="text/javascript" src="/lib/fastclick/lib/fastclick.min.js?v=1.0.6"></script><script type="text/javascript" src="/lib/jquery_lazyload/jquery.lazyload.js?v=1.9.7"></script><script type="text/javascript" src="/lib/velocity/velocity.min.js?v=1.2.1"></script><script type="text/javascript" src="/lib/velocity/velocity.ui.min.js?v=1.2.1"></script><script type="text/javascript" src="/js/src/utils.js?v=5.1.1"></script><script type="text/javascript" src="/js/src/motion.js?v=5.1.1"></script><script type="text/javascript" src="/js/src/scrollspy.js?v=5.1.1"></script><script type="text/javascript" src="/js/src/post-details.js?v=5.1.1"></script><script type="text/javascript" src="/js/src/bootstrap.js?v=5.1.1"></script><script type="text/javascript">function proceedsearch(){$("body").append('<div class="search-popup-overlay local-search-pop-overlay"></div>').css("overflow","hidden"),$(".search-popup-overlay").click(onPopupClose),$(".popup").toggle();var t=$("#local-search-input");t.attr("autocapitalize","none"),t.attr("autocorrect","off"),t.focus()}var isfetched=!1,isXml=!0,search_path="search.xml";0===search_path.length?search_path="search.xml":search_path.endsWith("json")&&(isXml=!1);var path="/"+search_path,onPopupClose=function(t){$(".popup").hide(),$("#local-search-input").val(""),$(".search-result-list").remove(),$("#no-result").remove(),$(".local-search-pop-overlay").remove(),$("body").css("overflow","")},searchFunc=function(t,e,o){"use strict";$("body").append('<div class="search-popup-overlay local-search-pop-overlay"><div id="search-loading-icon"><i class="fa fa-spinner fa-pulse fa-2x fa-fw"></i></div></div>').css("overflow","hidden"),$("#search-loading-icon").css("margin","20% auto 0 auto").css("text-align","center"),$.ajax({url:t,dataType:isXml?"xml":"json",async:!0,success:function(t){isfetched=!0,$(".popup").detach().appendTo(".header-inner");var n=isXml?$("entry",t).map(function(){return{title:$("title",this).text(),content:$("content",this).text(),url:$("url",this).text()}}).get():t,r=document.getElementById(e),s=document.getElementById(o),a=function(){var t=r.value.trim().toLowerCase(),e=t.split(/[\s\-]+/);e.length>1&&e.push(t);var o=[];if(t.length>0&&n.forEach(function(n){function r(e,o,n,r){for(var s=r[r.length-1],a=s.position,i=s.word,l=[],h=0;a+i.length<=n&&0!=r.length;){i===t&&h++,l.push({position:a,length:i.length});var p=a+i.length;for(r.pop();0!=r.length&&(s=r[r.length-1],a=s.position,i=s.word,p>a);)r.pop()}return c+=h,{hits:l,start:o,end:n,searchTextCount:h}}function s(t,e){var o="",n=e.start;return e.hits.forEach(function(e){o+=t.substring(n,e.position);var r=e.position+e.length;o+='<b class="search-keyword">'+t.substring(e.position,r)+"</b>",n=r}),o+=t.substring(n,e.end)}var a=!1,i=0,c=0,l=n.title.trim(),h=l.toLowerCase(),p=n.content.trim().replace(/<[^>]+>/g,""),u=p.toLowerCase(),f=decodeURIComponent(n.url),d=[],g=[];if(""!=l&&(e.forEach(function(t){function e(t,e,o){var n=t.length;if(0===n)return[];var r=0,s=[],a=[];for(o||(e=e.toLowerCase(),t=t.toLowerCase());(s=e.indexOf(t,r))>-1;)a.push({position:s,word:t}),r=s+n;return a}d=d.concat(e(t,h,!1)),g=g.concat(e(t,u,!1))}),(d.length>0||g.length>0)&&(a=!0,i=d.length+g.length)),a){[d,g].forEach(function(t){t.sort(function(t,e){return e.position!==t.position?e.position-t.position:t.word.length-e.word.length})});var v=[];0!=d.length&&v.push(r(l,0,l.length,d));for(var C=[];0!=g.length;){var $=g[g.length-1],m=$.position,x=$.word,w=m-20,y=m+80;w<0&&(w=0),y<m+x.length&&(y=m+x.length),y>p.length&&(y=p.length),C.push(r(p,w,y,g))}C.sort(function(t,e){return t.searchTextCount!==e.searchTextCount?e.searchTextCount-t.searchTextCount:t.hits.length!==e.hits.length?e.hits.length-t.hits.length:t.start-e.start});var T=parseInt("1");T>=0&&(C=C.slice(0,T));var b="";b+=0!=v.length?"<li><a href='"+f+"' class='search-result-title'>"+s(l,v[0])+"</a>":"<li><a href='"+f+"' class='search-result-title'>"+l+"</a>",C.forEach(function(t){b+="<a href='"+f+'\'><p class="search-result">'+s(p,t)+"...</p></a>"}),b+="</li>",o.push({item:b,searchTextCount:c,hitCount:i,id:o.length})}}),1===e.length&&""===e[0])s.innerHTML='<div id="no-result"><i class="fa fa-search fa-5x" /></div>';else if(0===o.length)s.innerHTML='<div id="no-result"><i class="fa fa-frown-o fa-5x" /></div>';else{o.sort(function(t,e){return t.searchTextCount!==e.searchTextCount?e.searchTextCount-t.searchTextCount:t.hitCount!==e.hitCount?e.hitCount-t.hitCount:e.id-t.id});var a='<ul class="search-result-list">';o.forEach(function(t){a+=t.item}),a+="</ul>",s.innerHTML=a}};r.addEventListener("input",a),$(".local-search-pop-overlay").remove(),$("body").css("overflow",""),proceedsearch()}})};$(".popup-trigger").click(function(t){t.stopPropagation(),isfetched===!1?searchFunc(path,"local-search-input","local-search-result"):proceedsearch()}),$(".popup-btn-close").click(onPopupClose),$(".popup").click(function(t){t.stopPropagation()}),$(document).on("keyup",function(t){var e=27===t.which&&$(".search-popup").is(":visible");e&&onPopupClose()})</script></body><script>$(function(){$("a").not(".nav-link,.cloud-tie-join-count,.ignore-href,.jstree-anchor").addClass("animsition-link")});var burst1=new mojs.Burst({left:0,top:0,radius:{5:40},children:{shape:"circle",fill:["red","cyan","orange"],fillOpacity:.8,radiusX:3.5,radiusY:3.5}});document.addEventListener("click",function(a){null==a.target.href&&"footer"!=a.target.className&&"copyright"!=a.target.className&&"author__urls social-icons"!=a.target.className&&"author__avatar"!=a.target.className&&"sidebar sidebar-active"!=a.target.className&&burst1.tune({x:a.pageX,y:a.pageY}).generate().replay()})</script><script type="text/javascript" src="/js/message.js"></script></html><!-- rebuild by neat -->